<!-- src/components/PictureInPicture.vue -->
<template>
  <div>
    <video ref="videoPlayer" width="640" height="360" controls>
      <source src="your-video-url.mp4" type="video/mp4">
      Your browser does not support the video tag.
    </video>
    <button @click="togglePictureInPicture">Toggle Picture-in-Picture</button>
  </div>
</template>

<script setup>
import { ref } from 'vue';

const videoPlayer = ref(null);

const togglePictureInPicture = async () => {
  if (document.pictureInPictureElement) {
    await document.exitPictureInPicture();
  } else if (videoPlayer.value.requestPictureInPicture) {
    await videoPlayer.value.requestPictureInPicture();
  } else {
    console.error('Picture-in-Picture is not supported in this browser.');
  }
};
</script>

<style scoped>
/* Add your styles here */
</style>